import { useState, useEffect } from "react";
const initImages: Array<string> = [
  "https://static.yrucd.com/wp-content/uploads/2019/06/particlesAIbanner1200_800.jpg",
  "https://pic.rmb.bdstatic.com/bjh/f7ace1b6ce982e8fbc4d3743d83c39147206.jpeg@h_1280",
  "https://img2.baidu.com/it/u=3641365793,2380189433&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
  "https://img1.baidu.com/it/u=1928454130,3657672080&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
];

const Carousel = ({
  images = initImages,
  interval = 3000,
}: {
  images?: Array<string>;
  interval?: number;
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  // 自动轮播
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, interval);

    // 清除定时器
    return () => clearInterval(timer);
  }, [images.length, interval]);

  // 前一张图片
  const handlePrev = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    );
  };

  // 下一张图片
  const handleNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  return (
    <div className="relative w-full h-96">
      <button className="absolute left-10 top-1/2 " onClick={handlePrev}>
        &lt;
      </button>

      <div className="w-full h-full">
        <img
          src={images[currentIndex]}
          alt={`Slide ${currentIndex}`}
          className="w-full h-full"
        />
      </div>

      <button className=" absolute right-10 top-1/2" onClick={handleNext}>
        &gt;
      </button>

      {/* <div className="absolute">
        {images.map((_, index) => (
          <span
            key={index}
            className={`dot ${index === currentIndex ? "active" : ""}`}
            onClick={() => setCurrentIndex(index)}
          ></span>
        ))}
      </div> */}
    </div>
  );
};

export default Carousel;
